<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <breadcrumb :title="'临时通行证管理'" :noBack="true"></breadcrumb>
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入姓名、手机号" class="input" clearable></el-input>
                            <el-select v-model="status" class="select" placeholder="请选择状态">
                                <el-option
                                    v-for="item in statusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-button type="primary" @click="getList(1)">查询</el-button>
                        </div>
                        <div class="text-right">
                            <el-button class="primary" @click="openDialog">新增</el-button>
                            <el-button @click="dataExport()">导出</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header"
                                   :slotColumns="slotColumns" :height="'100%'">
                        <template slot="status" slot-scope="scope">
                            {{statusList[scope.row.status]}}
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" v-if="scope.row.status==1"
                                         @click="approval(scope.row)">启用
                                </el-link>
                                <el-link type="primary" :underline="false" v-if="scope.row.status==0"
                                         @click="approval(scope.row)">禁用
                                </el-link>
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-msk :show.sync="showCreate" title="添加临时通行证" :width="'450px'" @save="saveCard"
                        @cancel="closeDialog">
                <el-form class="form-common" :model="createForm" :rules="createRules" ref="createForm"
                         size="small" label-width="90px" :label-position="'right'">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="createForm.name" size="small" placeholder="请输入姓名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="cardId">
                        <el-input v-model="createForm.cardId" size="small" placeholder="请输入身份证号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="createForm.phone" size="small" placeholder="请输入手机号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="所在病区" prop="inpatientAreaId">
                        <el-cascader v-model="createForm.inpatientAreaId" ref="inpatientArea" class="full"
                                     clearable
                                     :show-all-levels="false"
                                     :separator="' '"
                                     @change="changeFloor"
                                     placeholder="请选择病区"
                                     :props="{label:'name',value:'treeId',children:'children'}"
                                     :options="floorInfo">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="失效时间" prop="expireTime">
                        <el-date-picker
                            class="full no-icon"
                            :prefix-icon="' '"
                            :editable="false"
                            v-model="createForm.expireTime"
                            type="datetime"
                            :format="'yyyy-MM-dd HH:mm'"
                            placeholder="请选择失效时间">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </dialog-msk>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import breadcrumb from '../components/breadcrumb'
    import qs from 'qs'
    import dialogMsk from '../components/dialog'

    export default {
        data() {
            let validatePhone = (rule, value, callback) => {
                if (value && !/^1\d{10}$/.test(value)) {
                    callback(new Error('手机号格式错误'))
                } else {
                    callback()
                }
            }
            return {
                name: '', // 姓名
                status: '', // 状态
                statusOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '有效',
                        value: 0
                    },
                    {
                        label: '禁用',
                        value: 1
                    },
                    {
                        label: '失效',
                        value: 2
                    }
                ],
                statusList: ['有效', '禁用', '失效'], // 状态集
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'cardId',
                        label: '身份证号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '手机号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'areaName',
                        label: '所在病区',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'expireTimeStr',
                        label: '失效时间',
                        minWidth: '180',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '100',
                        align: 'center'
                    }
                ],
                slotColumns: ['status', 'operation'],
                page: {
                    current: 1,
                    pages: 2,
                    searchCount: true,
                    size: 15,
                    total: 2
                },
                index: 1,
                loading: false,
                showCreate: false,
                createForm: {
                    name: '',
                    phone: '',
                    cardId: '',
                    expireTime: '',
                    inpatientAreaId: []
                },
                createRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    phone: [
                        // {required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请输入身份证号', trigger: 'blur'}
                    ],
                    expireTime: [
                        {required: true, message: '请选择失效时间', trigger: 'change'}
                    ],
                    inpatientAreaId: [
                        {required: true, message: '请选择所在病区', trigger: 'change'}
                    ]
                },
                floorInfo: [] // 病区
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/temporaryCard/pageData', {
                    nameAndPhone: this.name,
                    status: this.status,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 启用/禁用
            approval(row) {
                let _this = this,
                    message = '确定' + (row.status === 0 ? '禁用' : '启用') + '该临时卡吗？'
                this.$method.messageBox('confirm', message, (action, instance) => {
                    if (action === 'confirm') {
                        _this.$http.get('/temporaryCard/changeStatus', {
                            id: row.id
                            // status: row.status
                        }).then(result => {
                            if (result.success) {
                                _this.getList()
                            }
                        })
                    }
                }, '', false, false)
            },
            // 导出表格
            dataExport() {
                let params = {
                    nameAndPhone: this.name,
                    status: this.status
                }
                window.open(location.origin + '/_api/temporaryCard/download?' + qs.stringify(params), '_blank')
            },
            // 获取病区列表
            getFloorInfo(callback) {
                this.loading = true
                this.$http.get('/patient/getTree?type=3').then(result => {
                    this.loading = false
                    if (result.success) {
                        this.floorInfo = result.data
                        if (callback) callback()
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            changeFloor(val) {
                console.log(this.$refs['inpatientArea'].getCheckedNodes(true))
            },
            // 新增账号
            openDialog() {
                let _this = this
                this.getFloorInfo(() => {
                    _this.showCreate = true
                })
            },
            saveCard() {
                let _this = this
                this.validate('createForm', () => {
                    this.submitAdd(function () {
                        _this.closeDialog()
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            submitAdd(callback) {
                this.contentLoading = true
                let params = {
                    name: this.createForm.name,
                    phone: this.createForm.phone,
                    cardId: this.createForm.cardId,
                    expireTime: this.$filter.timeFormat(this.createForm.expireTime, 'YYYY-MM-DD HH:mm:ss'),
                    areaId: (this.createForm.inpatientAreaId && this.createForm.inpatientAreaId.length) ? this.$refs['inpatientArea'].getCheckedNodes(true)[0].data.id : '',
                    areaName: (this.createForm.inpatientAreaId && this.createForm.inpatientAreaId.length) ? this.$refs['inpatientArea'].getCheckedNodes(true)[0].data.name : ''
                }
                this.$http.post('/temporaryCard/insertCard', params).then(result => {
                    this.contentLoading = false
                    if (result.success) {
                        this.$message.success({
                            message: '添加成功。',
                            showClose: true
                        })
                        this.getList()
                        if (callback) callback()
                    }
                }).catch(() => {
                    this.contentLoading = false
                })
            },
            closeDialog() {
                if (this.$refs.createForm) this.$refs.createForm.resetFields()
                this.showCreate = false
            }
        },
        components: {
            tableExample,
            page,
            breadcrumb,
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .content {
    }

    .full {
        width: 100% !important;
    }
</style>
